<script setup>
import { useRouter, useRoute } from 'vue-router';
import { ref, watch } from 'vue';

const router = useRouter();
const route = useRoute();

// 初始化时设置 activeKey，默认为第一个标签页
const activeKey = ref(route.path || '/user/manager');

// 监听 activeKey 的变化，当切换 Tab 时跳转到对应路由
watch(activeKey, (newKey) => {
  if (newKey !== route.path) {
    router.push(newKey);
  }
});

// 监听路由的变化，确保 activeKey 和当前路由同步
watch(
  () => route.path,
  (newPath) => {
    if (newPath !== activeKey.value) {
      activeKey.value = newPath;
    }
  }
);
</script>

<template>
  <div id="user-page">
    <div class="card">
      <a-tabs :active-key="activeKey" type="card-gutter" @change="activeKey = $event">
        <a-tab-pane key="/user/manager" title="用户管理">
        </a-tab-pane>
        <a-tab-pane key="/user/online" title="在线用户">
        </a-tab-pane>
      </a-tabs>
      <router-view/>
    </div>
  </div>
</template>

<style scoped>
.card {
  margin-top: 20px;
  background-color: var(--color-bg-1);
  border: 1px solid var(--color-neutral-1);
}

:deep(.arco-tabs-content) {
  padding: 0;
}
</style>
